<!--
 * @Author: bln
 * @Date: 2024-04-03 00:00:00
 * @FilePath: \zmglpt-ui-mobile-v1.1\dev\pages\check\maanshan\markerLabel\index.vue
 * @Description: 零售户贴标功能
-->
<template>
  <view class="page">
		<!-- #ifndef H5-DINGDING -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
      <view class="nav-right-icon" @click="save">保存</view>
    </theme-navbar>
    <!-- #endif -->
    <!-- #ifdef H5-WECHAT || H5-EMP -->
		 <fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<view class="content">
      <p class="tagSelect">已选标签：</p>
      <view class="card">
        <u-row class="f-b" v-for="item, index in selectedTags" :key="item.tagUuid">
          <u-col span="4">
            <u-icon name="close" color="red" size="24" class="u-m-r-6" @tap="delCur(item)" />
            <label>{{ item.tagName }}：</label>
          </u-col>
          <u-col span="8" class="f-b u-flex-1">
            <!--布尔-->
            <u-radio-group v-if="item.tagType == L_TAG_TYPE.L_TAG_TYPE01" v-model="item.val" @change="(e) => changeRadio(e, index)">
              <u-radio v-for="(v, k) in radioList" :key="k" :name="v.value">{{ v.name }}</u-radio>
            </u-radio-group>
            <!--枚举-->
            <u-radio-group v-if="item.tagType == L_TAG_TYPE.L_TAG_TYPE02" :wrap="true" v-model="item.val" @change="(e) => changeEnum(e, index)">
              <u-radio v-for="(c, k) in item.dictList" :key="k" :name="c.value">{{ c.name }}</u-radio>
            </u-radio-group>
            <!--日期-->
            <div v-if="item.tagType == L_TAG_TYPE.L_TAG_TYPE03">
              <u-input :border="true" :disabled="true" placeholder="" v-model="item.val" @tap="dateShow = true" />
              <u-calendar mode="date" max-date="9999-12-31" v-model="dateShow" @change="(d) => changeCalendar(d, index)" />
            </div>
            <!--数字-->
            <div v-if="item.tagType == L_TAG_TYPE.L_TAG_TYPE04">
              <u-number-box v-model="item.val" :min="0" />
            </div>
            <!--文本-->
            <u-input v-if="item.tagType == L_TAG_TYPE.L_TAG_TYPE05" :border="true" placeholder="" v-model="item.val" />
            <!--组织机构-->
            <u-input v-if="item.tagType == L_TAG_TYPE.L_TAG_TYPE06" :border="true" placeholder="" :disabled="true" v-model="item.valName" @click="orgSelectShow = true" />
            <u-popup mode="bottom" height="80%" v-model="orgSelectShow">
              <org-select :isHybrid="true" :treeType="item.enumCode" limitNodeType="all" @choose="changeOrg($event, index)" />
            </u-popup>
            <!--时间-->
            <div v-if="item.tagType == L_TAG_TYPE.L_TAG_TYPE07" class="u-flex">
              <u-input :border="true" :disabled="true" placeholder="" v-model="item.val" @tap="timeShow = true" />
              <u-picker mode="time" :params="paramsTime" v-model="timeShow" @confirm="(e) => changeTime(e, index)" />
            </div>
            <!--下拉框（多选）-->
            <u-input v-if="item.tagType == L_TAG_TYPE.L_TAG_TYPE08" :border="true" :disabled="true" v-model="item.valName" @click="mulitChoiceShow = true" />
            <u-popup mode="bottom" height="50%" v-model="mulitChoiceShow">
              <dic-multi-choice :keyWord="item.enumCode" @select="(e) => multiChoiceConfirm(e, index)" />
            </u-popup>
          </u-col>
        </u-row>
      </view>
      <view class="tagList">
        <u-collapse ref="cons">
          <u-collapse-item :title="item.groupName" v-for="item in tagList" :key="item.gpUid">
            <view class="label_con">
              <u-tag v-for="tc in item.tagHostDataList" :key="tc.tagUuid" :text="tc.tagName" @click="addTag(tc)" />
            </view>
          </u-collapse-item>
        </u-collapse>
      </view>
		</view>
  </view>
</template>

<script>
import orgSelect from '@/components/org-select.vue'
import checkService from '@/service/check/check.service'
import { L_TAG_TYPE } from '@/service/check/mapping/enum.js'
import dicMultiChoice from '@/components/dic_multi_choice.vue'

export default {
  components:{ orgSelect, dicMultiChoice },
  data() {
    return {
      L_TAG_TYPE,
      dateShow: false,
      timeShow: false,
      orgSelectShow: false,
      mulitChoiceShow: false,
      retailerUuid: '',
      dicCurrentSelect: '',
      oriTags: [],
      tagList: [],
      selectedTags: [],
      paramsTime: { // 时间模式
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true
      },
      radioList: [
        { value: '1', name: '是' },
        { value: '0', name: '否' }
      ],
      fContent: [{
        active: false,
        text: '保存',
        iconPath: require('@/static/confirm.png'),
        selectedIconPath: require('@/static/confirm.png')        
      }]
    }
  },
  onLoad() {
    const { retailerUuid, selectedTags } = this.getRouteParam()
    this.retailerUuid = retailerUuid
    this.oriTags = selectedTags
    selectedTags.forEach(item => {
      const data = item.enumCode ? { ...item, dictList: this.getDictList(item) } : item
      this.selectedTags.push(data)
    })
    this.getTagForRetailer()
  },
  methods: {
    setRightBtns() {
      this.$deviceApi.setRight('保存', () => {
        this.save()
        this.setRightBtns()
      }, true, true)
    },
    fabtrigger(btn) {
      if (btn.index == 0) {
        this.save()
      }
    },
    // 获取枚举数据
    getDictList(item) {
      return this.$u.dic.getByDictCode(item.enumCode)?.map(v => {
        return {
          name: v.bcbName,
          value: v.bcbCode,
          label: v.bcbName,
          checked: item.val?.includes(v.bcbCode)
        }
      }) || []
    },
    // 日历选择
    changeCalendar(d, index) {
      this.selectedTags[index].val = d.result
      this.dateShow = false
    },
    // 时间选择
    changeTime(e, index) {
      this.selectedTags[index].val = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
      this.timeShow = false
    },
    // 单选
    changeRadio(e, index) {
      this.selectedTags[index]['valName'] = e === '1' ? '是' : '否'
    },
    // 单选-枚举
    changeEnum(e, index) {
      this.selectedTags[index]['val'] = e
      this.selectedTags[index]['valName'] = this.selectedTags[index]['dictList'].find(c => c.value === e)?.label || ''
    },
    // 组织机构选择
    changeOrg(orgs, index) {
      if(orgs.length > 0){
        this.selectedTags[index]['val'] = orgs[0].id
        this.selectedTags[index]['valName'] = orgs[0].name
      }
      this.orgSelectShow = false
    },
    // 下拉多选选择
    multiChoiceConfirm(e, index) {
      this.selectedTags[index]['val'] = e.map(v => v.bcbCode).join(',')
      this.selectedTags[index]['valName'] = e.map(v => v.bcbName).join(',')
      this.mulitChoiceShow = false
    },
    // 添加标签
    addTag(item) {
      if (this.selectedTags.map(v => v.tagUuid).includes(item.tagUuid)) {
        return this.$u.toast(`${item.tagName}标签已存在，不能重复添加！`)
      }
      let data = item.enumCode ? { ...item, dictList: this.getDictList(item) } : item
      if(data.tagType === this.L_TAG_TYPE.L_TAG_TYPE01) {
        data.val = '1'
        data.valName = '是'
      }
      this.selectedTags.push(data)
    },
    // 删除标签
    delCur(item) {
      this.selectedTags = this.selectedTags.filter(t => t.tagUuid !== item.tagUuid)
    },
    // 获取标签数据
    getTagForRetailer() {
      this.$u.loading('加载中...')
      checkService.getTagForRetailer({
        handmadeFlag: '1',
        retailerUuid: this.retailerUuid
      }).then(res => {
        this.$u.hideLoading()
        if (res.success) {
          this.tagList = res.data || []
        }
      }).catch(e => {
        this.$u.toast(e)
      })
    },
    validate() {
      let isEmpty = false
      this.selectedTags.map(item => {
        if(!item.val) {
          isEmpty = true
          this.$u.toast(`${item.tagName}标签值不能为空！`)
        }
      })
      return isEmpty
    },
    // 保存标签
    save() {
      const deleteTags = this.oriTags.filter(v => !this.selectedTags.map(v => v.tagUuid).includes(v.tagUuid))
      if(this.validate()) return
      this.$u.loading('保存中...')
      checkService.saveTagHostDataBatch({
        delDataList: deleteTags,
        addDataList: this.selectedTags,
        retailerUuid: this.retailerUuid
      }).then(res => {
        this.$u.hideLoading()
        if (res.success) {
          this.backPrev({
            param: true,
            paramKey: 'refresh'
          })
        }
      }).catch(e => {
        this.$u.hideLoading()
        this.$u.toast(e)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  padding: 20rpx 10rpx;
  margin: 22rpx 10rpx;
  min-height: 150rpx;
}
.tagSelect {
  margin-left: 20rpx;
  margin-top: 20rpx;
}
.tagList {
  margin: 0 10rpx;
}
.f-b {
  align-items: baseline!important;
}
.u-tag {
  margin: 0 15rpx 15rpx 0;
}
.sub_title {
  margin: 10rpx 0;
}
.u-line {
  margin-right: 6rpx!important;
  width: 15rpx!important;
}
/deep/ .u-input__input {
  font-size: 28rpx;
  min-height: auto;
}
</style>
